<template>
  <view class="policySettingMain">
    <u-navbar
      title="机具调拨"
      :background="{ background: '#fb4535' }"
      title-color="#fff"
      back-icon-color="#fff"
    >
      <view
        class="uNavBarRight"
        slot="right"
        @click="$u.route('/pages/jjhb/jjhbRecord')"
        >调拨记录</view
      >
    </u-navbar>
    <u-tabs-swiper
      ref="uTabs"
      height="80"
      :list="tabList"
      :current="current"
      @change="tabsChange"
      :is-scroll="false"
      active-color="#fb4535"
      bar-height="8"
    ></u-tabs-swiper>

    <swiper
      :current="swiperCurrent"
      @animationfinish="animationfinish"
      class="chooseItem"
    >
      <swiper-item>
        <view class="policySettingBox">
          <view class="policySettingOne">
            <u-cell-item
              icon="account-fill"
              title="代理商"
              :value="renderData.agentValue"
              :title-style="titleStyle"
              :value-style="valueStyle"
              @click="angentShowTap(1)"
            ></u-cell-item>
            <u-cell-item
              icon="bookmark-fill"
              title="产品名称"
              :value="renderData.productValue"
              :title-style="titleStyle"
              :value-style="valueStyle"
              @click="productShowTap"
            ></u-cell-item>
            <u-cell-item
              icon="coupon-fill"
              title="产品SN号"
              :value="renderData.snValue"
              :title-style="titleStyle"
              :value-style="valueStyle"
              @click="productNumShowTap"
            >
            </u-cell-item>
            <u-cell-item
              icon="file-text-fill"
              title="已选机具"
              :value="
                renderData.selectedMachinesList.length
                  ? renderData.selectedMachinesList.length + '台'
                  : '0台'
              "
              :title-style="titleStyle"
              :value-style="valueStyle"
              @click="selectedMachinesShowTap"
            ></u-cell-item>
          </view>

          <view class="makeSure flex align-center justify-between">
            <u-button
              type="error"
              :ripple="true"
              style="background: orange"
              @click="$u.route('/pages/jjhb/massTransfer')"
              >批量划拨</u-button
            >
            <u-button type="error" :ripple="true" @click="comfirmAllocationTap"
              >确定划拨</u-button
            >
          </view>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="policySettingBox">
          <view class="policySettingOne">
            <u-cell-item
              icon="account-fill"
              title="代理商"
              :value="renderData.agentValue"
              :title-style="titleStyle"
              :value-style="valueStyle"
              @click="angentShowTap(2)"
            ></u-cell-item>
            <u-cell-item
              icon="bookmark-fill"
              title="产品名称"
              :value="renderData.productValue"
              :title-style="titleStyle"
              :value-style="valueStyle"
              @click="productShowTap"
            ></u-cell-item>
            <u-cell-item
              icon="coupon-fill"
              title="产品SN号"
              :value="renderData.snValue"
              :title-style="titleStyle"
              :value-style="valueStyle"
              @click="productNumShowTap(2)"
            >
            </u-cell-item>
            <u-cell-item
              icon="file-text-fill"
              title="已选机具"
              :value="
                renderData.selectedMachinesList.length
                  ? renderData.selectedMachinesList.length + '台'
                  : '0台'
              "
              :title-style="titleStyle"
              :value-style="valueStyle"
              @click="selectedMachinesShowTap"
            ></u-cell-item>
          </view>

         <view class="makeSure flex align-center justify-between">
            <u-button type="error" :ripple="true" style="background: orange"@click="$u.route('/pages/jjhb/massBackTransfer')">批量回拨</u-button>
            <u-button
              type="error"
              :ripple="true"
              @click="comfirmBackTap"
              >确定回拨
            </u-button>
          </view>
		  
		<!--  <view class="makeSure flex align-center justify-between">
		    <u-button type="error" :ripple="true" style="background: orange" @click="$u.route('/pages/jjhb/massBackTransfer')">批量回拨</u-button>
		    <u-button type="error" :ripple="true" @click="comfirmBackTap">确定回拨</u-button>
		  </view> -->
        </view>
      </swiper-item>
    </swiper>

    <!-- 代理商 -->
    <u-popup v-model="agentShow" mode="bottom" height="80%">
      <view class="agentViewMain">
        <view class="agentViewHeader solid-bottom">
          <view
            class="backView flex align-center justify-center"
            @click="angentShowTap(`${chooseWay}`)"
          >
            <u-icon name="arrow-left" color="#333" size="32"></u-icon>
          </view>
          <text>请选择代理商</text>
        </view>
        <view class="agentViewSearch">
          <u-search
            placeholder="请输入手机号或代理商姓名"
            v-model="searchAgent"
            :show-action="false"
            shape="square"
            @change="searchTap('searchAgent')"
          ></u-search>
        </view>
        <view class="agentViewBox" v-if="renderData.agentList.length > 0">
          <view
            class="agentViewItem solid-bottom flex align-center justify-between"
            v-for="(item, index) in renderData.agentList"
            :key="index"
            @click="selectAgentTap(item, index)"
          >
            <view>{{ item.nick_name }}-{{ item.account }}</view>
            <view
              class="radioView"
              :class="currentAgent == index ? 'active' : ''"
            ></view>
          </view>
        </view>
        <view class="noMachine flex align-center" v-else>
          <image
            src="../../static/images/noData/zwsh.png"
            mode="widthFix"
          ></image>
          <text>暂无代理商</text>
        </view>
        <view class="agentBtnView"
          ><button
            style="width: 100%"
            type="default"
            @click="angentShowTap(`${chooseWay}`)"
          >
            确定
          </button></view
        >
      </view>
    </u-popup>
    <!-- 产品 -->
    <u-popup v-model="productShow" mode="bottom" height="50%">
      <view class="productViewMain">
        <view class="productViewHeader solid-bottom">
          <view
            class="backView flex align-center justify-center"
            @click="productShowTap"
          >
            <u-icon name="arrow-left" color="#333" size="32"></u-icon>
          </view>
          <text>请选择</text>
          <view class="comfirmView" @click="productShowTap">完成</view>
        </view>
        <view class="productViewBox" v-if="renderData.productsList.length > 0">
          <view
            class="
              productViewItem
              solid-bottom
              flex
              align-center
              justify-between
            "
            v-for="(item, index) in renderData.productsList"
            :key="index"
            @click="selectProductTap(item, index)"
          >
            <view>{{ item.name }}</view>
            <view
              class="radioView"
              :class="currentProduct == index ? 'active' : ''"
            ></view>
          </view>
        </view>
        <view class="noMachine flex align-center" v-else>
          <image
            src="../../static/images/noData/zwsh.png"
            mode="widthFix"
          ></image>
          <text>暂无产品</text>
        </view>
      </view>
    </u-popup>

    <!-- 产品号 -->
    <u-popup
      v-model="productNumShow"
      mode="bottom"
      height="80%"
      :mask-close-able="false"
    >
      <view class="agentViewMain">
        <view class="agentViewHeader solid-bottom">
          <view
            class="backView flex align-center justify-center"
            @click="productNumShowTap"
          >
            <u-icon name="arrow-left" color="#333" size="32"></u-icon>
          </view>
          <text>产品SN号</text>
        </view>
        <view class="agentViewSearch">
          <u-search
            placeholder="请输入SN号"
            v-model="searchMachines"
            :show-action="false"
            shape="square"
            @change="searchTap('searchSn')"
          ></u-search>
        </view>
        <view class="agentViewBox" v-if="renderData.machinesList.length > 0">
          <view
            :class="[
              item.animate
                ? 'animated bounceOutRight agentViewItem solid-bottom flex align-center justify-between'
                : 'agentViewItem solid-bottom flex align-center justify-between',
            ]"
            v-for="(item, index) in renderData.machinesList"
            :key="index"
            @click="selectMachinesTap(index, item.number)"
          >
            <view>{{ item.number }}</view>
            <view>
              <u-icon name="plus" color="#fb4535" size="32"></u-icon>
            </view>
          </view>
        </view>
        <view class="noMachine flex align-center" v-else>
          <image
            src="../../static/images/noData/zwsh.png"
            mode="widthFix"
          ></image>
          <text>暂无产品</text>
        </view>
        <view class="agentBtnView"
          ><button type="default" @click="productNumShowTap">确定</button></view
        >
      </view>
    </u-popup>
    <!-- 已选机具 -->
    <u-popup v-model="selectedMachinesShow" mode="bottom" height="80%">
      <view class="agentViewMain">
        <view class="agentViewHeader solid-bottom">
          <view
            class="backView flex align-center justify-center"
            @click="selectedMachinesShowTap"
          >
            <u-icon name="arrow-left" color="#333" size="32"></u-icon>
          </view>
          <text>已选机具</text>
        </view>
        <view
          class="agentViewBox"
          style="padding-top: 88rpx"
          v-if="renderData.selectedMachinesList"
        >
          <view
            class="agentViewItem solid-bottom flex align-center justify-between"
            v-for="(item, index) in renderData.selectedMachinesList"
            :key="index"
            @click="deleteItem(index, item)"
          >
            <view>{{ item }}</view>
            <view>
              <u-icon name="trash-fill" color="#fb4535" size="32"></u-icon>
            </view>
          </view>
        </view>
        <view class="noMachine flex align-center" v-else>
          <image
            src="../../static/images/noData/zwsh.png"
            mode="widthFix"
          ></image>
          <text>暂无机具</text>
        </view>
      </view>
    </u-popup>
    <u-modal
      v-model="show"
      title="调拨提醒"
      content="您确定要划拨吗?"
      show-cancel-button
      @confirm="confirm"
      confirm-color="#fb4535"
    ></u-modal>

    <u-modal
      v-model="backShow"
      title="回拨提醒"
      content="您确定要回拨吗?"
      show-cancel-button
      @confirm="backConfirm"
      confirm-color="#fb4535"
    ></u-modal>
    <u-toast ref="uToast" />
    <toast></toast>
  </view>
</template>

<script>
export default {
  data() {
    return {
      titleStyle: {
        color: "#333333",
        fontSize: "32rpx",
      },
      valueStyle: {
        color: "#666666",
        fontSize: "32rpx",
      },
      currentAgent: -1,
      searchAgent: "",
      currentProduct: -1,
      nuserId: "",
      productId: "",
      searchMachines: "",
      renderData: {
        agentValue: "请选择代理商",
        productValue: "请选择产品",
        snValue: "请选择产品SN号",
        agentList: [],
        productsList: [],
        machinesList: [],
        selectedMachinesList: [],
      },
      agentShow: false,
      productShow: false,
      productNumShow: false,
      selectedMachinesShow: false,
      show: false,
      backShow: false,

      // 新增回拨功能
      tabList: [
        {
          name: "机具调拨",
        },
        {
          name: "机具回拨",
        },
      ],
      swiperCurrent: 0,
      current: 0,
      chooseWay: 1,
      angentId: "",
    };
  },
  onLoad() {
    this.getGetTransferUsers();
  },
  methods: {
    angentShowTap(chooseWay) {
      if (chooseWay) {
        this.chooseWay = chooseWay;
      }
      this.agentShow = !this.agentShow;
      this.currentAgent = -1;
      this.searchAgent = "";
      this.renderData.productValue = "请选择产品";
    },
    productShowTap() {
      if (this.renderData.agentValue == "请选择代理商") {
        this.$refs.uToast.show({
          title: "请选择代理商",
          type: "error",
        });
        return;
      }
      this.productShow = !this.productShow;
    },
    productNumShowTap() {
      if (this.renderData.productValue == "请选择产品") {
        this.$refs.uToast.show({
          title: "请选择产品",
          type: "error",
        });
        return;
      }
      this.searchMachines = "";
      this.productNumShow = !this.productNumShow;
      this.renderData.snValue = `已选择${this.renderData.selectedMachinesList.length}台机具`;
    },
    selectedMachinesShowTap() {
      if (this.renderData.selectedMachinesList.length > 0) {
        this.selectedMachinesShow = !this.selectedMachinesShow;
      } else {
        this.$refs.uToast.show({
          title: "您还没有选择机具",
          type: "error",
        });
      }
    },
    //获取代理列表
    getGetTransferUsers() {
      this.$u.api
        .getTransferUsers({
          searchVal: this.searchAgent,
        })
        .then((res) => {
          if (res.status == 200) {
            let datas = res.result;
            datas = this.$tools.aesDecryptBat(this, datas, "account");
            this.renderData.agentList = datas;
          }
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
             this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
          setTimeout(() => {
            this.$u.route({
              type: "navigateBack",
              delta: 1,
            });
          }, 2000);
        });
    },
    //获取获取调拨代理对应的产品列表
    getTransferProducts(agentId) {
      this.nuserId = agentId;
      this.$u.api
        .getTransferProducts({
          agentId: agentId,
        })
        .then((res) => {
          if (res.status == 200) {
            let datas = res.result;
            this.renderData.productsList = datas;
          }
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
             this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
          setTimeout(() => {
            this.$u.route({
              type: "navigateBack",
              delta: 1,
            });
          }, 2000);
        });
    },
    //据代理和产品的关系 查询机具
    getTransferMachines(productId) {
      this.productId = productId;
      this.$u.api
        .getTransferMachines({
          productId: this.productId,
          keyword: this.searchMachines,
        })
        .then((res) => {
          if (res.status == 200) {
            let datas = res.result;
            datas.forEach((item) => {
              item.animate = false;
              if (this.renderData.selectedMachinesList.includes(item.number)) {
                item.animate = true;
              }
            });
            this.renderData.machinesList = datas;
          }
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
             this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
          setTimeout(() => {
            this.$u.route({
              type: "navigateBack",
              delta: 1,
            });
          }, 2000);
        });
    },

    getTransferBackMachines(productId) {
      this.productId = productId;

      this.$u.api
        .getTransferBackMachines({
          productId: this.productId,
          nuserId: this.angentId,
          keyword: this.searchMachines,
        })
        .then((res) => {
          if (res.status == 200) {
            let datas = res.result;
            datas.forEach((item) => {
              item.animate = false;
              if (this.renderData.selectedMachinesList.includes(item.number)) {
                item.animate = true;
              }
            });
            this.renderData.machinesList = datas;
          }
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
             this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
          setTimeout(() => {
            this.$u.route({
              type: "navigateBack",
              delta: 1,
            });
          }, 2000);
        });
    },
    //加入已选终端列表中
    selectMachinesTap(index, item) {
      let addListDatas = this.renderData.selectedMachinesList;
      let listDatas = this.renderData.machinesList;
      listDatas[index].animate = true;
      this.renderData.machinesList = listDatas;
      if (!addListDatas.includes(item)) {
        addListDatas.push(item);
      } else {
        this.$refs.uToast.show({
          title: "该终端已添加",
          type: "error",
        });
      }
    },
    //删除已选列表中的数据
    deleteItem(index, item) {
      let listDatas = this.renderData.selectedMachinesList;
      if (listDatas.length > 0) {
        this.renderData.selectedMachinesList.splice(index, 1);
        if (listDatas.length == 0) {
          this.selectedMachinesShow = false;
          this.renderData.snValue = "请选择产品SN号";
        }
        this.renderData.machinesList.forEach((it, i) => {
          if (it.number == item) {
            this.renderData.machinesList[i].animate = false;
            return;
          }
        });
        this.renderData.snValue = `已选择${this.renderData.selectedMachinesList.length}台机具`;
      }
    },
    // 搜索
    searchTap(type) {
      if (type == "searchAgent") {
        this.currentAgent = -1;
        this.getGetTransferUsers();
        // let reg = /^[0-9]+.?[0-9]*$/;
        // let searchAgent = this.searchAgent;
        // if (reg.test(searchAgent)) {
        //   this.searchAgentParams = this.$tools.aesEncrypt(this, searchAgent);
        //   this.getGetTransferUsers();
        // } else {
        //   this.searchAgentParams = this.searchAgent;
        //   this.getGetTransferUsers();
        // }
      } else if (type == "searchSn") {
        if (this.chooseWay == 1) {
          this.getTransferMachines(this.productId);
        } else {
          this.getTransferBackMachines(this.productId);
        }
      }
    },
    //选择类
    selectAgentTap(item, index) {
      this.angentId = item.id;
      this.currentAgent = index;
      this.renderData.agentValue = `${item.nick_name}-${item.account}`;
      this.getTransferProducts(item.id);
      this.currentProduct = -1;
    },
    selectProductTap(item, index) {
      this.currentProduct = index;
      this.renderData.productValue = item.name;
      if (this.chooseWay == 1) {
        this.getTransferMachines(item.id);
      } else {
        this.getTransferBackMachines(item.id);
      }
    },
    // 确定划拨
    comfirmAllocationTap() {
      let nuserId = this.nuserId;
      let productId = this.productId;
      let snNoes = this.renderData.selectedMachinesList.join(",");
      if (nuserId == "") {
        this.$refs.uToast.show({
          title: "请选择代理商",
          type: "error",
        });
        return;
      }
      if (productId == "") {
        this.$refs.uToast.show({
          title: "请选择产品",
          type: "error",
        });
        return;
      }
      if (this.renderData.selectedMachinesList.length == 0) {
        this.$refs.uToast.show({
          title: "请选择机具",
          type: "error",
        });
        return;
      }
      this.show = true;
    },
    confirm() {
      let nuserId = this.nuserId;
      let productId = this.productId;
      let snNoes = this.renderData.selectedMachinesList.join(",");
      this.$u.api
        .addTransferOrder({
          nuserId: nuserId,
          productId: productId,
          snNoes: snNoes,
        })
        .then((res) => {
          if (res.status == 200) {
            this.$refs.uToast.show({
              title: "划拨成功",
              type: "success",
            });
            setTimeout(() => {
              this.$u.route({
                url: "/pages/jjhb/jjhbRecord",
                type: "redirect",
              });
            }, 1500);
          } else {
            this.$refs.uToast.show({
              title: res.msg,
              type: "error",
            });
          }
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
             this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
          setTimeout(() => {
            this.$u.route({
              type: "navigateBack",
              delta: 1,
            });
          }, 2000);
        });
    },

    // 机具回拨
    comfirmBackTap() {
      let nuserId = this.nuserId;
      let productId = this.productId;
      let snNoes = this.renderData.selectedMachinesList.join(",");
      if (nuserId == "") {
        this.$refs.uToast.show({
          title: "请选择代理商",
          type: "error",
        });
        return;
      }
      if (productId == "") {
        this.$refs.uToast.show({
          title: "请选择产品",
          type: "error",
        });
        return;
      }
      if (this.renderData.selectedMachinesList.length == 0) {
        this.$refs.uToast.show({
          title: "请选择机具",
          type: "error",
        });
        return;
      }
      this.backShow = true;
    },
    backConfirm() {
      let nuserId = this.nuserId;
      let productId = this.productId;
      let snNoes = this.renderData.selectedMachinesList.join(",");
      this.$u.api
        .addTransferBackOrder({
          nuserId: nuserId,
          productId: productId,
          snNoes: snNoes,
        })
        .then((res) => {
          if (res.status == 200) {
            this.$refs.uToast.show({
              title: "回拨成功",
              type: "success",
            });
            setTimeout(() => {
              this.$u.route({
                url: "/pages/jjhb/jjhbRecord",
                type: "redirect",
              });
            }, 1500);
          } else {
            this.$refs.uToast.show({
              title: res.msg,
              type: "error",
            });
          }
        })
        .catch((res) => {
          if (res.errMsg == "request:fail timeout") {
            this.$u.toast("请求超时，请重试!");
          } else if (res.errMsg == "request:fail") {
            this.$u.toast("请求失败，请重试");
          } else {
             this.$u.toast("请求失败，请重试");
          }
          this.$loading(false);
          setTimeout(() => {
            this.$u.route({
              type: "navigateBack",
              delta: 1,
            });
          }, 2000);
        });
    },

    // 新增回拨
    tabsChange(index) {
      this.swiperCurrent = index;
      this.backInitial(), this.getGetTransferUsers();
      this.nuserId = "";
      this.productId = "";
    },
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },

    backInitial() {
      let startValue = this.renderData;
      startValue.agentValue = "请选择代理商";
      startValue.productValue = "请选择产品";
      startValue.snValue = "请选择产品";
      startValue.agentList = [];
      startValue.productsList = [];
      startValue.machinesList = [];
      startValue.selectedMachinesList = [];
      this.currentAgent = -1;
    },
  },
};
</script>

<style lang="scss" scoped>
.chooseItem {
  height: 88vh;
}

.policySettingBox {
  .policySettingOne {
    background-color: #fff;
    margin-top: 20rpx;
  }

  .tip {
    line-height: 80rpx;
    color: #f33;
    font-size: 28rpx;
    padding: 0 32rpx;
  }

  .policySettingTwo {
    padding: 0 32rpx;

    .title {
      height: 100rpx;
      font-size: 36rpx;
      color: $uni-text-color;

      .uIcon {
        margin-right: 10rpx;
      }
    }

    .twoBox {
      background-color: #fff;
      border-radius: 10rpx;
      padding: 0 20rpx;
      margin-bottom: 30rpx;

      .formItem {
        height: 100rpx;
        padding: 0 30rpx;

        .left {
          text {
            display: block;
            font-size: 32rpx;
            color: $uni-text-color;
            margin-right: 30rpx;

            &:nth-of-type(1) {
              width: 150rpx;
            }

            &:nth-of-type(2) {
              position: relative;
              top: 4rpx;
            }
          }
        }

        .right {
          width: 30%;
        }
      }
    }

    > button {
      background-color: #fb4535;
      font-size: 32rpx;
      color: #fff;

      &::after {
        border: none;
      }
    }
  }

  .makeSure {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 40rpx;
    padding: 30rpx;

    button {
      width: 47.5%;
      margin: 0;
      background-color: #fb4535;
    }
  }

  .allocationRecord {
    text-align: center;
    font-size: 30rpx;
    padding-top: 30rpx;
    color: #fb4535;
  }
}

.agentViewMain {
  position: relative;

  .agentViewHeader {
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 32rpx;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 9;

    .backView {
      width: 80rpx;
      height: 80rpx;
      position: absolute;
      left: 0;
      top: 0;
    }
  }

  .agentViewSearch {
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    left: 0;
    top: 80rpx;
    background-color: #fff;
    z-index: 9;
  }

  .agentViewBox {
    padding: 184rpx 30rpx 120rpx;

    .agentViewItem {
      height: 100rpx;
    }
  }

  .agentBtnView {
    padding: 20rpx 30rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;

    > button {
      background-color: #fb4535;
      font-size: 32rpx;
      color: #fff;
      width: 100%;
      margin: 0;

      &::after {
        border: none;
      }
    }
  }
}

.productViewMain {
  position: relative;

  .productViewHeader {
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 32rpx;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 9;

    .backView {
      width: 80rpx;
      height: 80rpx;
      position: absolute;
      left: 0;
      top: 0;
    }

    .comfirmView {
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      color: #fb4535;
      padding: 0 30rpx;
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  .productViewBox {
    padding: 80rpx 30rpx 0;

    .productViewItem {
      height: 100rpx;
    }
  }
}

.radioView {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 2rpx solid #ccc;

  &.active {
    border-color: #fb4535;
    background-color: #fb4535;
    position: relative;

    &::before {
      content: "";
      display: block;
      width: 10rpx;
      height: 6rpx;
      background-color: #fff;
      transform: rotate(45deg);
      position: absolute;
      left: 6rpx;
      top: 18rpx;
    }

    &::after {
      content: "";
      display: block;
      width: 22rpx;
      height: 6rpx;
      background-color: #fff;
      transform: rotate(-45deg);
      position: absolute;
      left: 10rpx;
      top: 16rpx;
    }
  }
}

.uNavBarRight {
  padding-right: 30rpx;
  color: #fff;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
    display: none;
    height: 0;
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}
</style>
